<template>
  <div class="simple_tap_box">
    <!-- 选项卡部分 -->
    <ul class="tap_nav">
      <li v-for="(value, index) in navTitle" :key="index">
        <router-link active-class="a_change_color" :to="value.url">
          {{ value.name }}
        </router-link>
      </li>
    </ul>
    <!-- 内容部分 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "SimpleTapNav",
  setup() {
    let navTitle = ref([
      { name: "产品介绍", url: "/description" },
      { name: "产品性能", url: "/performance" },
      { name: "产品使用说明", url: "/direction" },
    ]);

    return {
      navTitle,
    };
  },
};
</script>

<style scoped lang='less'>
@tapNavLiAColor: rgb(255, 255, 255);
@tapNavLiABackgroundColor: rgb(0, 123, 206);
@tapNavLiATextShadow: 5px 2px 3px #003c8a;
@tapBoxHeight: 300px;

.simple_tap_box {
  position: relative;
  display: grid;
  grid-template-columns: 15% auto;
  column-gap: 3px;
  top: 50px;
  left: 50%;
  width: max(70%, 700px);
  height: @tapBoxHeight;
  box-shadow: 0px 0px 10px 5px #dbdbdb;
  background-color: rgb(206, 206, 206);
  transform: translateX(-50%);
  box-sizing: border-box;
  .tap_nav {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    list-style: none;
    li {
      width: 100%;
      height: (@tapBoxHeight / 3);
      border: 1px solid rgb(206, 206, 206);
      background-color: rgb(243, 243, 243);
      box-sizing: border-box;
      a {
        display: block;
        width: 100%;
        height: 100%;
        color: rgb(58, 58, 58);
        font-size: 1rem;
        text-align: center;
        text-decoration: none;
        line-height: (@tapBoxHeight / 3);
      }
      a:hover {
        color: @tapNavLiAColor;
        text-shadow: @tapNavLiATextShadow;
        background-color: @tapNavLiABackgroundColor;
        transition: all 0.5s ease 0s;
      }
      .a_change_color {
        color: @tapNavLiAColor;
        text-shadow: @tapNavLiATextShadow;
        background-color: @tapNavLiABackgroundColor;
      }
    }
  }
}
</style>